<script setup>
import { color } from "echarts";
import { ref } from "vue";

const option = ref({
  color: [
    "#d8caaf",
    "#96a48d",
    "#c1b3ad",
    "#c79780",
    "#813c3f",
    "#4d7b9f",
    "#3f503b",
  ],
  title: {
    text: "各朝代自然科学领域成就数量",
    left: "center",
    textStyle: {
      color: "#2c3e50",
      fontSize: 18,
    },
  },

  animationDuration: 10000,
  tooltip: {
    trigger: "axis",
    axisPointer: { type: "line" },
  },

  xAxis: {
    type: "category",
    data: [
      "先秦",
      "秦朝",
      "汉朝",
      "三国",
      "两晋",
      "南北朝",
      "隋朝",
      "唐朝",
      "五代十国",
      "宋朝",
      "元朝",
      "明朝",
      "清朝",
    ],
    boundaryGap: false,
    axisLabel: {
      interval: 0,
      rotate: 30,
      fontSize: 12,
    },
  },

  yAxis: { type: "value", scale: true },

  grid: {
    left: "10%",
    right: "20%",
    top: "15%",
    bottom: "12%",
  },
  series: [
    {
      name: "农学",
      data: [8, 1, 6, 2, 3, 5, 2, 7, 1, 9, 6, 12, 8], //《齐民要术》《农政全书》等
      type: "line",
      smooth: true,
      showSymbol: false,
      endLabel: { show: true, formatter: "{a} : {c}" },
    },
    {
      name: "天文地理",
      data: [12, 1, 15, 3, 5, 7, 4, 18, 1, 22, 10, 15, 11], //《甘石星经》《授时历》等
      type: "line",
      smooth: true,
      showSymbol: false,
      endLabel: { show: true, formatter: "{a} : {c}" },
    },
    {
      name: "数学",
      data: [6, 0, 5, 2, 4, 3, 1, 6, 0, 14, 8, 7, 5], //《九章算术》《数书九章》等
      type: "line",
      smooth: true,
      showSymbol: false,
      endLabel: { show: true, formatter: "{a} : {c}" },
    },
    {
      name: "医学",
      data: [5, 0, 10, 3, 6, 7, 1, 12, 1, 11, 5, 9, 7], //《黄帝内经》《本草纲目》等
      type: "line",
      smooth: true,
      showSymbol: false,
      endLabel: { show: true, formatter: "{a} : {c}" },
    },
    {
      name: "军事",
      data: [7, 2, 4, 2, 1, 2, 3, 5, 1, 7, 3, 8, 6], //《孙子兵法》《武经总要》等
      type: "line",
      smooth: true,
      showSymbol: false,
      endLabel: { show: true, formatter: "{a} : {c}" },
    },
    {
      name: "工程技术",
      data: [3, 2, 7, 2, 4, 5, 3, 10, 2, 15, 8, 12, 14], //《考工记》《营造法式》等
      type: "line",
      smooth: true,
      showSymbol: false,
      endLabel: { show: true, formatter: "{a} : {c}" },
    },
    {
      name: "综合",
      data: [4, 1, 8, 1, 2, 3, 2, 9, 0, 12, 6, 15, 10], //《梦溪笔谈》《天工开物》等
      type: "line",
      smooth: true,
      showSymbol: false,
      endLabel: { show: true, formatter: "{a} : {c}" },
    },
  ],
});

</script>

<template>
  <!-- 折线图 -->
  <ECharts class="chart" :option="option" autoresize />
</template>

<style>
.chart {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #f8f9fa, #e9ecef); /* 浅灰色渐变背景 */
}
</style>
